<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<!--全局css-->
		<link href="../css/g.css" rel="stylesheet">
		<!--每个文件对应一个css-->
		<link href="index.css" rel="stylesheet" />
		<style>
        .icon1{
            background: url('../img/tab/tab0-0.png') no-repeat;
			background-size: contain;
        }
        .icon2{
            background: url('../img/tab/tab1-0.png') no-repeat;
			background-size: contain;
        }
        .icon3{
            background: url('../img/tab/tab2-0.png') no-repeat;
			background-size: contain;
        }
        .icon4{
            background: url('../img/tab/tab3-0.png') no-repeat;
			background-size: contain;
        }
        .mui-bar-tab .mui-active .icon1{
            background: url('../img/tab/tab0-1.png') no-repeat;
			background-size: contain;
        }
        .mui-bar-tab .mui-active .icon2{
           background: url('../img/tab/tab1-1.png') no-repeat;
			background-size: contain;
        }
        .mui-bar-tab .mui-active .icon3{
           background: url('../img/tab/tab2-1.png') no-repeat;
			background-size: contain;
        }
        .mui-bar-tab .mui-active .icon4{
            background: url('../img/tab/tab3-1.png') no-repeat;
			background-size: contain;
        }
		.tabbar{
			border-top:1px solid #f2f2f2 ;
		}
		</style>
		<script>
			//每个页面必须添加 ，css单位使用rem
			document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px';
		</script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-plusempty mui-pull-right"></a>
			<button class="mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
			hello
		</button>
		</header>

		<nav class="mui-bar mui-bar-tab tabbar">
			<a class="mui-tab-item mui-active" data-index="0">
				<span class="mui-icon mui-icon-home icon1"></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item" data-index="1">
				<span class="mui-icon mui-icon-home icon2"></span>
				<span class="mui-tab-label">岗位</span>
			</a>
			<a class="mui-tab-item" data-index="2">
				<span class="mui-icon mui-icon-home icon3"></span>
				<span class="mui-tab-label">联系</span>
			</a>
			<a class="mui-tab-item" data-index="3">
				<span class="mui-icon mui-icon-home icon4"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>

		<!--有用到再引用-->
		<!--接口-->
		<script src="../js/base.js"></script>
		<!--模板-->
		<script src="../js/laytpl.js"></script>
		<!--常用方法 dom操作用原生或mui-->
		<script src="../js/mq.js"></script>
		<!--当前页面js-->
		<script src="index.js"></script>

		<script>
			var config = {
				initIndex: 0,
				pages: [
					{
						url: 'msg/msg/msg.html',
						id: "tabMsg"
					},
					{
						url: 'station/station/station.html',
						id: "tabStation"
					},
					{
						url: 'contacts/contacts/contacts.html',
						id: "tabContacts"
					},
					{
						url: "personal/personal/personal.html",
						id: "tabPersonal"
					}
				],
				view: []
			};
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				for(var i = 0; i < 4; i++) {
					var sub = {};
					sub = plus.webview.create(
						config.pages[i].url, //子页url
						config.pages[i].id, //子页id
						{
							top: 0, //设置距离顶部的距离
							bottom: '50px' //设置距离底部的距离
						}
					);
					if(i != config.initIndex) {
						sub.hide();
					}
					self.append(sub);
					config.view.push(sub);
				}
				mui('.mui-bar-tab').on('tap', 'a', function(e) {
					var k = +this.getAttribute('data-index');
					config.view[config.initIndex].hide();
					config.initIndex = k;
					config.view[k].show();
				});
			});
		</script>
	</body>

</html>